<template>
  <el-card>
    <el-row>
      <el-col :span="12" :offset="7">
        <my-date v-on:query="queryData"></my-date>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="9">
        <el-select
          value-key="item"
          v-model="selValue"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          stripe
          border
          :cell-class-name="tableCellClassName"
        >
          <el-table-column prop="city" label="单位"> </el-table-column>
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column sortable prop="avg" label="平均准确率">
          </el-table-column>
          <el-table-column prop="submit" label="上报时间"> </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import myDate from "../../myDate.vue";
export default {
  components: {
    myDate,
  },
  data() {
    return {
      tableData: [],
      options: [
        {
          id: "0000",
          name: "河南电网",
        },
        {
          id: "0001",
          name: "郑州",
        },
        {
          id: "0002",
          name: "安阳",
        },
        {
          id: "0003",
          name: "平顶山",
        },
        {
          id: "0004",
          name: "洛阳",
        },
        {
          id: "0005",
          name: "焦作",
        },
        {
          id: "0006",
          name: "新乡",
        },
        {
          id: "0007",
          name: "三门峡",
        },
        {
          id: "0008",
          name: "开封",
        },
        {
          id: "0009",
          name: "南阳",
        },
        {
          id: "0010",
          name: "漯河",
        },
        {
          id: "0011",
          name: "濮阳",
        },
        {
          id: "0012",
          name: "商丘",
        },
        {
          id: "0013",
          name: "驻马店",
        },
        {
          id: "0014",
          name: "信阳",
        },
        {
          id: "0015",
          name: "许昌",
        },
        {
          id: "0016",
          name: "鹤壁",
        },
        {
          id: "0017",
          name: "周口",
        },
        {
          id: "0018",
          name: "济源",
        },
      ],
      value: "",
      selValue: "",
      timeColor: "normal",
    };
  },
  methods: {
    async queryData(start, end) {
      let netid = this.selValue;
      const { data: res } = await this.$http.get(
        `/manage1/fhyc/st/vue_fhyc_multiAvg?start=${start}&end=${end}&netid=${netid}`
      );
      this.tableData = res.data;
    },
    tableCellClassName({ row, column }) {
      let beginTime = this.$moment(row.date)
        .subtract(1, "days")
        .format("YYYY-MM-DD");
      let flag_9 = this.$moment(row.submit).isBefore(beginTime + " 09:00:00");
      let flag_17 = this.$moment(row.submit).isBefore(beginTime + " 17:00:00");
      let rate = row.avg >= 90 ? true : false;
      if (column.property == "submit") {
        if (flag_9) {
          return "normal";
        } else if (!flag_17) {
          return "danger";
        } else {
          return "warning";
        }
      }
      if (column.property == "avg") {
        if (rate) {
          return "warning";
        } else {
          return "danger";
        }
      }
    },
  },
};
</script>

<style scoped>
.el-select {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
</style>